<template>
  <div class="md:flex">
    <template v-for="(item, index) in growCardData" :key="item.title">
      <Card size="small" :loading="loading" :title="item.title" class="md:w-1/5 w-full !md:mt-0 !mt-5" :class="[index + 1 < 5 && '!md:mr-4']" :canExpan="false">
        <template #extra>
          <Tag :color="item.color">{{ item.action }}</Tag>
        </template>

        <div class="py-4 px-4 flex justify-between">
          <CountTo prefix="" :startVal="1" :endVal="item.value" class="text-2xl" />
          <Icon :icon="item.icon" :size="40" />
        </div>

        <!-- <div class="p-2 px-4 flex justify-between">
          <span>总{{ item.title }}</span>
          <CountTo prefix="" :startVal="1" :endVal="item.total" />
        </div> -->
      </Card>
    </template>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue';
  import { CountTo } from '/@/components/CountTo/index';
  import { Icon } from '/@/components/Icon';
  import { Tag, Card } from 'ant-design-vue';
  import { growCardList } from '../data';

  const growCardData = ref<any>([]);

  const props = defineProps({
    loading: {
      type: Boolean,
    },
    data:{
      type: Object
    }
  });

  initLogInfo();

  function initLogInfo() {
    if(props.data){
      growCardList[0].value = props.data?.currHour_uv ?? 0;
      growCardList[0].total = props.data?.currHour_uv ?? 0;
      growCardList[1].value = props.data?.currDate_pv ?? 0;
      growCardList[1].total = props.data?.currDate_pv ?? 0;
      growCardList[2].value = props.data?.currDate_uv ?? 0;
      growCardList[2].total = props.data?.currDate_uv ?? 0;
      growCardList[3].value = props.data?.currWeek_pv ?? 0;
      growCardList[3].total = props.data?.currWeek_pv ?? 0;
      growCardList[4].value = props.data?.currMonth_pv ?? 0;
      growCardList[4].total = props.data?.currMonth_pv ?? 0;
    }
    growCardData.value = growCardList;
  }

</script>
